<template>
  <!-- 登录页卡片 -->
  <div class="relative w-full h-screen bg-[#fafafa]">
    <div
      class="absolute left-[50%] translate-x-[-50%] top-[18%] w-[400px] h-[500px] border-[#e7e9e8] border-solid border-[1px] px-[8px] pt-[16px] pb-[8px] flex flex-col items-center rounded-[10px] bg-white box-border"
      style="
        box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.13),
          0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 12px 24px 16px rgba(0, 0, 0, 0.04);
      "
    >
      <img
        class="pt-[14px]"
        src="@/assets/img/logo.png"
        width="160"
        height="80"
      />
      <div class="text-[20px] pt-2">重置密码</div>
      <el-form
        class="w-[300px] pt-[10px]"
        label-width="80px"
        label-position="top"
        ref="resetRefs"
        :model="resetpwd"
        :rules="requiredRules"
        :inline="false"
      >
        <el-form-item prop="user">
          <el-input
            class="h-[40px]"
            v-model="resetpwd.user"
            :prefix-icon="User"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item class="!mb-[22px]" prop="newpassword">
          <el-input
            class="h-[40px]"
            v-model="resetpwd.newpassword"
            :prefix-icon="Lock"
            placeholder="请输入新密码密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="verify-block" prop="verificationCode">
          <el-input
            v-model="resetpwd.verificationCode"
            placeholder="请输入验证码"
            :prefix-icon="ChatDotRound"
            clearable
          />
          <el-button
            type="primary"
            plain
            size="default"
            :disabled="!(isEmail && !isCounting)"
            @click="getVerifyCode"
          >
            {{ buttonText }}
          </el-button>
        </el-form-item>
        <!-- 按钮部分 -->
        <el-form-item class="!mb-[9px]">
          <el-button
            @click="onReset"
            type="primary"
            class="w-[100%] !h-[38px] !rounded-[6px] !font-medium"
            >提交</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button class="w-[100%] !h-[38px] !rounded-[6px] !font-medium"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
      <div class="text-[#a19fa1] w-[100%]">
        <ul class="flex list-none px-[42px]">
          <li class="text-left flex-1 hover:cursor-pointer hover:text-black">
            去登陆
          </li>
          <li class="text-right flex-1 hover:cursor-pointer hover:text-black">
            遇到问题
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { Lock, User, ChatDotRound } from "@element-plus/icons-vue";
  import { reactive, ref } from "vue";
  import { getEmailCode, userResetPwd } from "@/api/user";

  let NAVLIST = [
    { name: "首页", path: "/", id: 1 },
    { name: "热门商品", path: "/product", id: 2 },
    { name: "联系我们", path: "/contact", id: 3 },
  ];

  const resetpwd = ref({
    user: "",
    newpassword: "",
    verificationCode: "",
  });

  // 按钮状态
  const isCounting = ref(false);
  // 按钮文字
  const buttonText = ref("获取验证码");
  const resetRefs = ref();
  const isEmail = ref(false);

  // 邮箱验证规则
  const emailValidator = (rule, value, callback) => {
    const emailRe =
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    const result = emailRe.test(value);
    console.log("邮箱格式" + result);
    if (result) {
      isEmail.value = true;
      console.log("邮箱校验成功");
      callback();
    } else {
      isEmail.value = false;
      callback(new Error("Illegal email address!"));
    }
  };

  // 必填表单验证规则
  const requiredRules = {
    user: [
      {
        required: true,
        message: "请输入电子邮箱地址",
        trigger: "change",
      },
      {
        validator: emailValidator,
        message: "请输入正确的邮箱格式",
        trigger: "change",
      },
    ],
    newpassword: [
      {
        required: true,
        message: "请输入新密码",
        trigger: "change",
      },
    ],
    verificationCode: [
      {
        required: true,
        message: "请输入验证码",
        trigger: "change",
      },
      {
        pattern: /^[a-zA-Z0-9]{6}$/,
        message: "限制6位数字或字母",
        trigger: "blur",
      },
    ],
  };

  /**
   * @description: 获取邮箱验证码
   * @return {*}
   */
  const getVerifyCode = () => {
    // 点击发送验证码后禁用按钮
    // 并倒计时60秒后启用
    // 按钮显示倒计时时间
    getEmailCode(resetpwd.value.user).then((res) => {
      ElMessage.success("验证码已发送，请注意查收");
    });
    if (isCounting.value) {
      return;
    }
    isCounting.value = true;
    buttonText.value = "60s";
    let count = 60;
    const timer = setInterval(() => {
      count--;
      buttonText.value = `${count}s`;
      if (count === 0) {
        clearInterval(timer);
        isCounting.value = false;
        buttonText.value = "获取验证码";
      }
    }, 1000);
  };

  /**
   * @description: 必填表单验证
   */
  const onReset = () => {
    resetRefs.value.validate((valid) => {
      if (valid) {
        userResetPwd(resetpwd.value).then((res) => {
          console.log(res);
          ElMessage.success("密码重置成功");
        });
        console.log(resetpwd.value);
        router.push({ path: "/login" });
      } else {
        // 表单验证失败逻辑
        ElMessage.error("输入不合法，请检查输入内容正确性");
        return;
      }
    });
  };
</script>

<style scoped>
  /* 如果有额外的样式，可以在这里添加 */
  a {
    text-decoration: none;
  }

  .verify-block {
    position: relative;
    padding-bottom: 8px;
    .el-input {
      height: 40px;
    }
    .el-button {
      height: 38px;
      position: absolute;
      right: 0;
      border: none;
    }
  }
</style>
